<template>
  <div class="content" @click="$router.push('/postdetail/' + item.id)">
    <!-- <div class="content" @click="$router.push('/postdetail?id=' + item.id)"> -->
    <!-- 单张图片布局 -->
    <div
      class="item_img"
      v-if="item.type === 1 && item.cover.length >= 1 && item.cover.length < 3"
    >
      <div class="left">
        <p class="title">{{ item.title }}</p>
        <p class="info">
          {{ item.user.nickname }}
          <span class="follow-up">{{ item.comment_length }}跟帖</span>
        </p>
      </div>
      <div class="right_img">
        <img :src="item.cover[0].url" alt="" />
      </div>
    </div>
    <!-- 多张图片 -->
    <div class="imgs" v-if="item.type === 2 && item.cover.length >= 3">
      <p class="title">{{ item.title }}</p>
      <div class="images">
        <img :src="item.cover[0].url" alt="" />
        <img :src="item.cover[1].url" alt="" />
        <img :src="item.cover[2].url" alt="" />
      </div>
      <p class="info">
        {{ item.user.nickname }}
        <span class="follow-up">{{ item.comment_length }}跟帖</span>
      </p>
    </div>
    <!-- 视频 -->
    <div class="video" v-if="item.type === 2 && item.cover.length >= 1">
      <p class="title">{{ item.title }}</p>
      <div class="vio">
        <img :src="item.cover[0].url" alt="" />
        <div class="icon">
          <span class="iconfont icon-shipin"></span>
        </div>
      </div>
      <p class="info">
        {{ item.user.nickname }}
        <span class="follow-up">{{ item.comment_length }}跟帖</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="less" scoped>
.content {
  padding: 3.333vw 2.778vw;
  .item_img {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.278vw solid #ececec;
    .left {
      .title {
        font-size: 4.444vw;
        color: #333;
      }
      .info {
        margin: 10px 0;
        font-size: 3.889vw;
        color: #868686;
        .follow-up {
          margin-left: 2.778vw;
        }
      }
    }
    .right_img {
      img {
        width: 33.611vw;
        height: 20.833vw;
      }
    }
  }
  .imgs {
    border-bottom: 1px solid #ececec;
    .title {
      font-size: 16px;
      color: #333;
      margin-bottom: 5px;
    }
    .info {
      margin: 10px 0;
      font-size: 3.889vw;
      color: #868686;
      .follow-up {
        margin-left: 2.778vw;
      }
    }
    .images {
      img {
        width: 32%;
        margin: 1px;
        height: 20.833vw;
      }
    }
  }
  .video {
    border-bottom: 1px solid #ececec;
    .title {
      font-size: 4.444vw;
      color: #333;
    }
    .info {
      margin: 10px 0;
      font-size: 3.889vw;
      color: #868686;
      .follow-up {
        margin-left: 2.778vw;
      }
    }
    .vio {
      position: relative;
    }
    img {
      width: 94.444vw;
      height: 47.222vw;
    }
  }
  .icon-shipin {
    font-size: 13.889vw;
  }
  .icon {
    color: rgba(100, 100, 100, 0.8);
    position: absolute;
    transform: translateX(-27/360 * 100vw) translateY(-27/360 * 100vw);
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}</style
>>
